<template>
  <div id="app">
    <h1>活动vue3新架构测试</h1>
    <header>
      <nav>
        <RouterLink v-for="item in routerData" :key="item.path" :to="item.path"
          >
          <h3>{{ item.name }}</h3>
        </RouterLink>
      </nav>
    </header>
    <RouterView />
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
const routerData = [
  {
    path: '/',
    name: 'Home',
  },
  {
    path: '/about',
    name: 'About',
  },
]
router.push('/about')
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
}
h3:hover {
  background: green;
  color: aliceblue;
  cursor: pointer;
}
nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
</style>
